import React, { memo } from 'react';
import { Box, Form, Card } from '@alifd/next';
import st from './detail.module.scss';
import { useIntl } from 'react-intl';


interface Props extends LogisticsState.DeteilVO {

}

const OrderDetail: React.FunctionComponent<Props> = (props): JSX.Element => {
  const intl = useIntl();
  return (
    <Card free>
      <Card.Header title="订单信息" />
      <Card.Divider />
      <Card.Content>
        <Box direction="row" spacing={20} className={st.Content}>
          <div className={st.imageBlock}>
            <img src={props.mainImage} alt="商品主图" className={st.mainImage} />
          </div>
          <Form
            labelAlign="left"
            responsive
            style={{ flex: 1 }}
            className={st.orderForm}
            isPreview
          >
            <Form.Item label="商品名称：" colSpan={12}>
              <span className={st['next-form-preview']}>{props.productName}</span>
            </Form.Item>
            <Form.Item label="品牌：" colSpan={6}>
              <span className={st['next-form-preview']}>{`${props.brandName || '-'}/${props.categoryName || ''}`}</span>
            </Form.Item>
            <Form.Item label="规格：" colSpan={6}>
              <span className={st['next-form-preview']}>{props.attrValue}</span>
            </Form.Item>
            <Form.Item label="商品金额：" colSpan={6}>
              <span className={st['next-form-preview']}>
                {intl.formatNumber(props.totalFee || 0, { style: 'currency', currency: 'USD' })}
              </span>
            </Form.Item>
            <Form.Item label="下单时间：" colSpan={6}>
              <span className={st['next-form-preview']}>
                {intl.formatDate(props.orderTime, { hourCycle: 'h24', dateStyle: 'short', timeStyle: 'short' })}
              </span>
            </Form.Item>
            <Form.Item label="订单号：" colSpan={6}>
              <span className={st['next-form-preview']}>{props.orderNo}</span>
            </Form.Item>
          </Form>
        </Box>
      </Card.Content>
    </Card>
  );
};

export default memo(OrderDetail);
